<template>
    <div class="search">
      <van-search
        placeholder="商品搜索"
        v-model="keyword"
        show-action
      ></van-search>
      <div v-if="currentState == 'default'">
        <div class="history" v-if="historyList.length > 0">
          <div class="title">
            <div>历史记录</div>
            <img
              src="../../../assets/images/del-address.png"
              alt=""
              @click="clearHistory"
            />
          </div>
          <div class="list">
            <div
              class="tag"
              v-for="item in historyList"
              :key="item.id"
              @click="itemClick(item.keyword)"
            >
              {{ item.keyword }}
            </div>
          </div>
        </div>

        <div class="history hot">
          <div class="title">
            <div>热门搜索</div>
          </div>
          <div class="list">
            <div
              class="tag"
              v-for="item in hotKeywordList"
              :key="item.id"
              :class="{ isHot: item.is_hot }"
              @click="itemClick(item.keyword)"
            >
              {{ item.keyword }}
            </div>
          </div>
        </div>
      </div>
      <div class="keywordList" v-else-if="currentState == 'keyword'">
        <ul>
          <li
            v-for="item in keywords"
            :key="item.id"
            @click="itemClick(item.name)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="goodsList" v-else>
        <van-tabs
          v-model="activeName"
          title-active-color="#b4282d"
          line-height="0"
          @click="tabClick"
        >
          <van-tab title="综合" name="0"></van-tab>
          <van-tab name="1">
            <template #title
              >价格
              <img
                class="price"
                :src="
                  order == ''
                    ? require('../../../assets/images/no.png')
                    : order == 'asc'
                    ? require('../../../assets/images/up.png')
                    : require('../../../assets/images/down.png')
                "
                alt=""
            /></template>
          </van-tab>
          <van-tab title="分类" name="2"></van-tab>
        </van-tabs>
        <ul>
          <li v-for="item in goodsList" :key="item.id">
            <img :src="item.list_pic_url" alt="" />
            <p>{{ item.name }}</p>
            <p>￥{{ item.retail_price }}</p>
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
/**
 *  STATE: 页面状态
 */
const STATE = {
  DEFAULT: "default", // 默认
  KEYWORD: "keyword", // 搜索关键词列表
  GOODS: "goods", // 搜索商品列表
};
import {
  indexaction,
  helperaction,
  addhistoryaction,
  clearhistoryAction,
} from "@/api/home/search/index";
export default {
  data() {
    return {
      keyword: "",
      currentState: STATE.DEFAULT, // 页面状态
      historyList: [], // 历史记录列表
      hotKeywordList: [], // 热门搜索列表
      keywords: [], // 关键词列表
      goodsList: [], // 产品列表
      activeName: 0,
      order: "",
      selectKeyword: "", // 被选中的关键词
    };
  },
  methods: {
    // 获取历史记录
    getHistory() {
      indexaction({ openId: localStorage.getItem("openId") }).then((res) => {
        console.log(res);
        this.historyList = res.data.historyData;
        this.hotKeywordList = res.data.hotKeywordList;
      });
    },
    itemClick(val) {
      console.log("itemClick:", val);
      this.currentState = STATE.GOODS;
      this.selectKeyword = val;
      // 保存到历史记录中
      addhistoryaction({
        keyword: val,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        this.getHistory();
      });
      // 获取商品
      helperaction({
        keyword: val,
      }).then((res) => {
        this.goodsList = res.data.keywords;
      });
    },
    tabClick(name) {
      console.log(name);
      if (name == "1") {
        this.order = this.order != "asc" ? "asc" : "desc";
      } else {
        this.order = "";
      }
      // 获取商品
      helperaction({
        keyword: this.selectKeyword,
        order: this.order,
      }).then((res) => {
        this.goodsList = res.data.keywords;
      });
    },
    clearHistory() {
      clearhistoryAction({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.historyList = [];
        }
      });
    },
  },
  created() {
    this.getHistory();
  },
  watch: {
    keyword() {
      if (this.keyword.length > 0) {
        this.currentState = STATE.KEYWORD;
        helperaction({
          keyword: this.keyword,
        }).then((res) => {
          console.log("keyword:", res);
          this.keywords = res.data.keywords;
        });
      } else {
        this.currentState = STATE.DEFAULT;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
